<!-- 用户管理新增、修改 -->
<template>
  <div>
    <el-dialog :title="userData.title" :visible.sync="userData.showModal" width="650px" :close-on-click-modal="false" top="5vh">
      <el-form label-width="80px" :model="data" ref="update" :rules="rules" v-loading="showLoading" :element-loading-text="$t('lan.dataLoading')">
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.name')" prop="name">
              <el-input size="medium" v-model="data.name" :placeholder="$t('lan.enterUserName')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.phone')" prop="mobile">
              <el-input size="medium" v-model="data.mobile" :placeholder="$t('lan.pleaseMobile')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.card')" prop="idCard">
              <el-input size="medium" v-model="data.idCard" :placeholder="$t('lan.pleaseCard')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.gender')" prop="sex">
              <el-radio-group v-model="data.sex">
                <el-radio label="1">{{$t('lan.male')}}</el-radio>
                <el-radio label="2">{{$t('lan.female')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="data.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :offset="3" :span="18">
            <el-form-item :label="$t('lan.role')" prop="roleId">
              <el-select :placeholder="$t('lan.selectRole')" v-model="data.roleId" size="medium">
                <el-option v-for="item in getList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="save">{{$t('lan.submit')}}</el-button>
        <el-button size="medium" @click="userData.showModal = false">{{$t('lan.cancel')}}</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['userData'],
  data () {
    //自定义校验
    let mobile = (rule, value, callback) => {
      if (value == '') {
        callback(new Error(this.$t('lan.pleaseMobile')));
      } else if (!this.regular.checkPhone().test(value)) {
        callback(new Error(this.$t('lan.phoneFormat')));
      } else {
        callback();
      }
    }
    let idCard = (rule, value, callback) => {
      if (value == '') {
        callback(new Error(this.$t('lan.IDCardsEmpty')));
      } else if (!this.regular.checkCard().test(value)) {
        callback(new Error(this.$t('lan.CardFormat')));
      } else {
        callback();
      }
    }
    return {
      showLoading: false,//是否显示loading
      data: {
        idCard: '',//身份证号
        mobile: '',//手机号
        sex: '',//性别
        // status:'',//状态
        roleId: '',//角色id
        id: '',//用户id
        name: '',//姓名
      },
      getList: [],//角色列表
      rules: {
        name: [
          { required: true, message: this.$t('lan.nameEmpty'), trigger: 'blur' },
        ],
        mobile: [
          { required: true, validator: mobile, trigger: 'blur' }
        ],
        idCard: [
          { required: true, validator: idCard, trigger: 'blur' }
        ],
        sex: [
          { required: true, message: this.$t('lan.pleaseCheckSex'), trigger: 'change' },
        ],
        // status:[
        //   {required: true, message: '请勾选状态', trigger: 'change' },
        // ],
        roleId: [
          { required: true, message: this.$t('lan.selectRole'), trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    //新增、修改用户
    save () {
      this.$refs['update'].validate(async (valid) => {
        if (valid) {
          this.showLoading = true
          let url = this.userData.type == 'create' ? '/user/save' : '/user/update'
          let httpMethod = this.userData.type == 'create' ? 'POST' : 'PUT'
          let result = await this.request.httpRequest(httpMethod, url, this.data)
          if (result.code == 200) {
            this.userData.showModal = false
            this.$message({ type: 'success', message: result.msg })
            this.$emit('closeModal')
          } else {
            this.$message({ type: 'error', message: result.msg })
          }
          this.showLoading = false
        }
      })
    },
    //获取详情
    async getDetail () {
      if (this.userData.userId) {
        let url = `/user/get/${this.userData.userId}`
        let result = await this.request.httpRequest('GET', url)
        if (result.code == 200) {
          this.data.idCard = result.data.idCard
          this.data.name = result.data.name
          // this.data.status = result.data.status
          this.data.sex = result.data.sex
          this.data.roleId = result.data.roleId
          this.data.id = result.data.id
          this.data.mobile = result.data.mobile
        } else {
          this.$message({ type: 'error', message: result.msg })
        }
      }
    },
    //获取用户角色
    async getRoleList () {
      let url = '/role/queryList'
      let result = await this.request.httpRequest('POST', url, {})
      if (result.code == 200) {
        this.getList = result.data
      } else {
        this.$message({ type: 'error', message: result.msg })
      }
    },
  },
  mounted () {
    Promise.all([this.getRoleList(), this.getDetail()])
  }
}
</script>
<style scoped>
</style>